<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create the Theme : Ionize User Guide</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>

<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='Ionize Dev Team' />
<meta name='description' content='Ionize User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<div id="nav2" onclick="myHeight.toggle();"><a name="top"></a><a href="javascript:void(0);"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>Ionize User Guide Version 0.9.7</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://www.ionizecms.com/">Ionize Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
Create the Theme
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="ionizecms.com/user-guide" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">


<h1>Create the Theme</h1>

<p>A theme is a folder containing :</p>
<ul>
	<li><a href="../general/views.html"><strong>Views</strong></a> used by the website,</li>
	<li><strong>Assets</strong> used by the theme (CSS, javascript, design pictures),</li>
	<li><strong>Helpers</strong> dedicated to the website (navigation helper for example),</li>
	<li><a href="../general/static_translations.html"><strong>Static translations</strong></a> files,</li>
	<li>Optional <strong>widgets</strong> used by the website.</li>
</ul>
<br/>

<p><img src="../images/ionize_folder.png" /></p>

<br/>
<p class="important"><strong>Important:</strong> The 3 folders in red (<kbd>config, helpers, views</kbd>) must be present in your theme folder.</p>


<h3>Main Ionize Folders</h3>

During your website conception with Ionize, you will mainly use these folders.
Know their role is a good introduction.


<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr>
	<th>Folder</th>
	<th>Usage</th>
	<th>Can be renamed</th>
	<th>Description</th>
</tr>
<tr>
	<td class="td"><strong>/files</strong></td>
	<td class="td">All the website content medias</td>
	<td class="td">Yes</td>
	<td class="td">Medias add through Ionize are stored here. This folder can contains sub-folders, its organization depends on your wishes.</td>
</tr>
<tr>
	<td class="td"><strong>/install</strong></td>
	<td class="td">Installer program</td>
	<td class="td"></td>
	<td class="td"><kbd>This folder MUST be deleted after installation</kbd></td>
</tr>
<tr>
	<td class="td"><strong>/themes</strong></td>
	<td class="td">Theme folder</td>
	<td class="td">No</td>
	<td class="td">Each subfolder of this folder is a theme. The <strong>admin</strong> subfolder is the Ionize panel theme. It must not be deleted.</td>
</tr>
<tr>
	<td class="td"><strong>/themes/default</strong></td>
	<td class="td">Default theme files</td>
	<td class="td">Yes</td>
	<td class="td">This is a very basic theme used after a fresh install of Ionize. You can rename it or copy it to create your own theme.</td>
</tr>
<tr>
	<td class="td"><strong>/themes/default/config</strong></td>
	<td class="td">Theme config files</td>
	<td class="td">No</td>
	<td class="td">Some of these files are written by Ionize</td>
</tr>
<tr>
	<td class="td"><strong>/themes/default/helpers</strong></td>
	<td class="td">Your helpers files</td>
	<td class="td">No</td>
	<td class="td">This folder is optional. If you wish to replace some of the existing helpers or create yours, put them in this folder.</td>
</tr>
<tr>
	<td class="td"><strong>/themes/default/language</strong></td>
	<td class="td">Translations files</td>
	<td class="td">No</td>
	<td class="td">
		This folder is created by Ionize when you create static translations items.<br/>
		See <a href="../general/static_translations.html">Static Translations</a> for more info.
	</td>
</tr>
<tr>
	<td class="td"><strong>/themes/default/views</strong></td>
	<td class="td">Website views</td>
	<td class="td">No</td>
	<td class="td">Contains all the views of your website.</td>
</tr>
</table>


</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="./static_translations.html">Static translations</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="./views.html">Introduction to Views</a>
</p>
<p><a href="http://www.ionizecms.com/">Ionize website</a></p>
</div>

</body>
</html>